<template>
    <div>
        <el-container>
            <el-main>
                <h1>个人中心</h1>
                <div>
                    <el-avatar :size="200"><span class="avatar-font-size">{{ userinfo.username }}</span></el-avatar>
                    <div><i class="el-icon-phone"></i>{{ userinfo.phonenumber }}</div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userinfo: {
                username: '用户名',
                phonenumber: '电话号码',
            }
        }
    },
    created() {
        this.getUserProfile();
    },
    methods: {
        getUserProfile() {
            const _this = this
            this.$axios.post('/user/getuser', {
                id: sessionStorage.getItem('userid'),
            }).then((res) => {
                // res.headers[code] // 成功 1 失败 0
                // data: {id username }
                if (res.data['code'] != 1) {
                    throw('请求失败！')
                }
                this.userinfo = res.data['data'];
                // 这里修改 this.username，this.phonenumber 等
            }).catch(function (error) {
                console.debug(error);
                _this.$notify.error({
                    title: '无法获取个人信息',
                    message: '具体错误 ' + error
                })
            })
        }
    }
}
</script>
<style>
  .avatar-font-size {
    font-size: 50px;
  }
</style>